<template>
  <div class="full-height bg-white my-mes">
    <div class="tree-head bg-primary text-white text-weight-regular">
        <q-icon name="iconfont iconyoujian" color="white" class="q-mr-sm" />
        <span class="head-title vertical-middle user-select-none">我的消息<span class="font-14">(共{{msgSum | toLtMore }}条)</span></span>
        <div class="fr font-size-18">
          <q-icon  name="iconfont icontubiao-12" class="cursor-pointer" color="white" @click="onEditStatus">
            <q-tooltip>去编辑</q-tooltip>
          </q-icon>
          <q-icon name="iconfont icontubiao2-97"
                  color="white" class="margin-l-10 toggle-icon cursor-pointer"
                  @click="onSelectWorkShop">
            <q-tooltip>设置</q-tooltip>
          </q-icon>
        </div>
    </div>
    <q-scroll-area class="box-content bg-white" :thumb-style="CommonConfig.thumbStyle">
            <q-list style="min-width: 100px;">
              <div v-for="(item, index) in mesListData" :key="index">
                <q-item
                  class="role-item"
                  :active="item.label=== activeMes"
                  active-class="activated"
                  clickable
                  @click.prevent="onMesClick(item)"
                  v-ripple
                  v-throttle
                  tag="label"
                >
                  <q-item-section>
                    <q-checkbox v-if="isEditStatus " v-model="item.isCheck" @input="onCheckInput" size="xs" style="position:absolute;left: -5px"/>
                    <q-item-label>
                    <div class="flex justify-between items-center">
                      <div class="flex items-center">
                        <div :class="isEditStatus ? 'q-ml-md' : ''"
                            class="img-content"
                            style="transition:0.5s;position:relative">
                            <img :src="`../../../../statics/img/home/${item.icon}.svg`" class="img-content">
                            <!-- 消息个数 -->
                            <div class="badge" v-if="item.num > 0">{{item.num | toLtMore}}</div>
                        </div>
                        <div class="q-ml-sm">{{item.labelName}}</div>
                      </div>
                      <div  class="q-mr-lg font-size-12">
                        {{ item.createTime | toNewDate }}
                      </div>
                      <div class="footprint-btn" v-if="item.id === activeMes && !isEditStatus">
                        <q-btn @click.stop="onDeleteItemMsg(item)" dense flat size="6px" class="close-btn"
                                icon="iconfont icontubiao-67" />
                      </div>
                    </div>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-separator />
              </div>
            </q-list>
      </q-scroll-area>
      <transition name="move">
        <div class="compare-msg" v-if="isEditStatus">
          <q-checkbox v-model="isAllSelect" class="q-mr-md" @input="onCheckAll"  :disable="!this.mesListData.length"/>
          <q-btn @click="onAllRead" class="btn" unelevated type="button"
                color="white" text-color="primary" label="全部已读" v-throttle :disable="isDisBtnAll"/>
          <q-btn @click="onDeleteMsgStatus" class="btn" unelevated type="button"
                color="white" text-color="primary" label="批量删除" v-throttle :disable="isDisBtnAll"/>
          <q-icon @click="isEditStatus = !isEditStatus" name="iconfont icontubiao-67" color="white" class="hide cursor-pointer" />
        </div>
      </transition>
      <msg-work-shop-dialog
          :show="isShowWorkShopDialog"
          @submit="onSubmitWorkShop"
          @close="isShowWorkShopDialog = false"/>
  </div>
</template>
<script>
import MsgWorkShopDialog from './msg-work-shop-dialog'
import MESLIST from 'src/boot/factory/mes-list.js'
import MES from './mes.js'
// import _ from 'lodash'
import { mapMutations, mapGetters } from 'vuex'
const { getMsgRead, putInitRead, deleteMsg } = MESLIST
const { msgIconList } = new MES()
export default {
  name: 'my-mes',
  components: {
    MsgWorkShopDialog
  },
  props: {},
  data () {
    return {
      activeMes: null,
      isEditStatus: false,
      isShowWorkShopDialog: false, // 显示设置弹窗
      isAllSelect: false // 全选的标志
    }
  },
  watch: {
    // 编辑切换重置
    isEditStatus (val) {
      this.mesListData.map(v => { v.isCheck = false })
      this.isAllSelect = false
    },
    messageBodyData (val) {
      // 重置消息体内容
      this.SET_MESCOUNT({
        params: val,
        activeMes: this.activeMes
      })
    }
  },
  computed: {
    // 选择的情况 是否disable
    isDisBtnAll () {
      return this.mesListData.filter(i => i.isCheck).length === 0
    },
    ...mapGetters({
      'userInfo': 'userInfo',
      'messageBodyData': 'mes/messageBodyData',
      'mesListData': 'mes/mesListData',
      'msgSum': 'mes/msgSum',
      'isVisible': 'mes/isVisible'
    }),
    checkList () {
      return this.mesListData.filter(i => i.isCheck).map(v => v.label)
    }
  },
  mounted () {
    this.getMsgRead()
  },
  methods: {
    // 消息接受设置回调
    onSubmitWorkShop () {
      this.isShowWorkShopDialog = false
      this.getMsgRead()
    },
    // change 消息目录
    onMesClick (item) {
      if (this.isEditStatus || this.isVisible) return
      this.activeMes = item.label
      this.SET_MSGDATA(this.activeMes)
    },
    // 编辑
    onEditStatus () {
      this.isEditStatus = !this.isEditStatus
    },
    onSelectWorkShop () {
      this.isShowWorkShopDialog = true
    },
    // 单选事件
    onCheckInput () {
      this.isAllSelect = this.mesListData.filter(y => y.isCheck).length === this.mesListData.length
    },
    // 全选事件
    onCheckAll (val) {
      this.mesListData.map(v => { v.isCheck = val })
    },
    // 全部已读
    onAllRead () {
      putInitRead(this.userInfo.user_id, { label: this.checkList }).then(res => {
        this.initCheck()
      }).catch(err => {
        console.log(err)
        this.initCheck()
      })
    },
    // 批量删除
    onDeleteMsgStatus () {
      this.deleteMsg(this.checkList)
    },
    // 重置选择结果
    initCheck () {
      // 重置全选条件
      this.getMsgRead()
      this.isAllSelect = false
    },
    // 单个删除
    onDeleteItemMsg (item) {
      this.deleteMsg([item.label])
    },
    // 公用删除逻辑
    deleteMsg (val) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          提示</p>`,
        html: true,
        message: '确认删除聊天信息?',
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      }).onOk(() => {
        deleteMsg(this.userInfo.user_id, { label: val }).then(res => {
          this.initCheck()
        }).catch(err => {
          console.log(err)
          this.initCheck()
        })
      })
    },
    // 获取初始化信息列表
    getMsgRead () {
      getMsgRead(this.userInfo.user_id).then(res => {
        const ret = res.data
        const member = !ret.length ? [] : ret.map(v => {
          let item = v
          item = { ...v, ...msgIconList.get(v.label) }
          return item
        }).sort((a, b) => {
          return a.createTime < b.createTime ? 1 : -1
        })
        this.$nextTick(() => {
          this.activeMes = !ret.length ? null : member[0].label
          this.SET_MSGDATA(this.activeMes)
        })
        this.SET_MESLISTDATA(member)
      }).catch(err => {
        console.log(err)
      })
    },
    ...mapMutations({
      'SET_MSGDATA': 'mes/SET_MSGDATA',
      'SET_MESLISTDATA': 'mes/SET_MESLISTDATA',
      'SET_MESCOUNT': 'mes/SET_MESCOUNT'
    })
  }
}
</script>
<style lang="stylus" scoped>
  .my-mes {
    display flex
    flex-direction column
    width 100%
    min-width 250px
    border-radius 6px
    overflow hidden
    height 100%
    background-color #ffffff
    .tree-head {
      flex 40px 0
      padding 0 10px
      line-height 40px
      font-size 18px
    }
    .box-content {
          flex 1
          padding-bottom 20px

          .role-item {
            font-size 16px

            &.activated {
              background #cfd6fe
              color $primary
            }

            &:hover {
              background #e8ebff

              /deep/ .q-focus-helper {
                display none
              }
            }
          }

          .q-separator {
            margin-left 20px
            width calc(100% - 40px)
          }
        }

    .toggle-icon {
      transition transform 300ms ease-in
      &.fold {
        transform rotate(-90deg)
      }
    }
    .footprint-btn{
      position absolute
      right 4px

      .close-btn{
        display inline-block
        width 18px
        height 18px
        min-width 18px
        min-height 18px
        color #999
        transition all ease-in .2s
        &:hover{
          color #fff
          background-color rgba(0,0,0,.2)
        }
      }
    }
    .compare-msg{
      position fixed
      left 0
      bottom 0
      right 0
      z-index 1100
      padding 10px 30px
      height 95px
      background-color rgba(0, 0, 0, 0.5)
      display flex
      align-items center
      .hide{
        position absolute
        top 10px
        right 20px
      }
      .btn{
        min-width 96px
        min-height 32px
        font-size 16px
        margin-right 10px
      }
    }
    .img-content{
      width 40px
      height 40px
    }
    .badge{
      position absolute
      right -5px
      top -5px
      color #ffffff
      background red
      padding 2px 4px
      border-radius 8px
      font-size 12px
      height 16px
      line-height 12px
      font-weight normal
      vertical-align baseline
      cursor inherit
      white-space nowrap
    }
  }
</style>
